import { Button, Collapse, Flex } from 'antd';
import './App.css'
import { useState } from 'react';
const baseStyle: React.CSSProperties = {
  width: '50%',
  border: '1px solid #1677ff',
  textAlign: 'center',
  verticalAlign: 'center',
  minHeight: "50px",
  lineHeight: "50px"
}
const tableHeader = {
  borderLeft: 'none',
  background: '#1677ff',
  color: '#fff'
}
const header = {
  ...baseStyle,
  ...tableHeader
}
const borderTop = {
  borderTop: 'none',
}
const cellTop = {
  ...baseStyle,
  ...borderTop
}
const cellLeftTop = {
  ...cellTop,
  borderLeft: 'none'
}
const product = {
  width: '25%',


}
const shouqiProduct = {
  width: '100%',
}
const shouqiOne = {
  display: "flex",
}
const borderBottom = {
  borderBottom: '1px solid #1677ff',
}
const center = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}
const mockData = [
  {
    id: 1,
    ticket: [
      {
        id: 1,
        name: '成人票',
        price: 100,
      },
      {
        id: 2,
        name: '儿童票',
        price: 50,
      },
      {
        id: 3,
        name: '老人票',
        price: 80,
      },
    ],
    Attractions: [
      {
        id: 1,
        name: '故宫',
        price: 100,
        time: '10:00-18:00',
      },
      {
        id: 2,
        name: '天安门',
        price: 50,
        time: '10:00-18:00',
      },
      {
        id: 3,
        name: '长城',
        price: 80,
        time: '10:00-18:00',
      },
    ],
    Hotel: [
      {
        id: 1,
        name: '北京饭店',
        price: 100,
        time: '10:00-18:00',
      },
      {
        id: 2,
        name: '格林豪泰',
        price: 50,
        time: '10:00-18:00',
      },
      {
        id: 3,
        name: '如家',
        price: 80,
        time: '10:00-18:00',
      },
    ],
  },
];
interface IItem {
  id: number,
  name: string,
  price: number,
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getData(data: any[]) {
  const arr: { isShow: boolean; data: IItem[]; }[] = []
  Object.keys(data[0]).forEach(item => {
    if (Array.isArray(data[0][item])) {
      arr.push({ isShow: false, data: data[0][item] })
    }
  })
  return arr
}
console.log(getData(mockData))

function App() {
  // 转换数据 [{isShow:true,data:[]}]
  const [isShow, setIsShow] = useState(getData(mockData))
  const collapse = (index: number) => {
    const newIshow = [...isShow]
    newIshow[index].isShow = !newIshow[index].isShow
    setIsShow(newIshow)
  }
  return (
    <>
      <div className="header">
        <Flex gap="middle" vertical>
          <Flex vertical={false}>
            <div style={header} >
              表头1
            </div>
            <div style={header} >
              表头2
            </div>
          </Flex>
          {
            isShow.map((item, index) => (<Flex key={index} vertical={false}>
              <div style={{ ...cellTop, ...center }}  >
                类型{index + 1}
              </div>
              <div style={{ ...cellLeftTop, display: !(item.isShow) ? "flex" : 'block' }} >
                {
                  !(item.isShow) ? <>
                    {
                      item.data.map((v, i) => (<div key={i} style={product}>{
                        v.name
                      }</div>))
                    }

                    <div style={{ ...product, borderRight: "none" }}>
                      <Button type="dashed" onClick={() => collapse(index)}>展开</Button>
                    </div>
                  </> : (<>
                    {
                      item.data.map((v, i) => {
                        return (
                          <div key={i}>
                            {i == 0 && <div style={{ ...borderBottom, ...shouqiOne }}>
                              <div style={{ flex: 1, }} >
                                {v.name}详情
                              </div>
                              <div style={{ flex: 1 }}>
                                <Button type="dashed" onClick={() => collapse(index)}>收起</Button>
                              </div>
                            </div>}
                            {
                              i == item.data.length - 1 && <div style={shouqiProduct}>{v.name}详情</div>
                            }
                            {
                              (i !== 0) && (i !== item.data.length - 1) && <div style={{ ...borderBottom, ...shouqiProduct }}>{v.name}详情</div>
                            }
                          </div>
                        )
                      })
                    }

                  </>)
                }
              </div>
            </Flex>))
          }
        </Flex>
      </div >
    </>
  )
}

export default App
